<template>
    <div class="checkboxs" style="padding:0px;width:20%;float: left" v-for="input in inputs" > 
        <label>
            <input type="checkbox" class="setcheckbox" :value="input.value"  v-model="input.checked" v-on:change="onchange" />
            <span class="lbl"> {{input.msg}}</span>
        </label> 
    </div>
</template>
<style scoped>
    label input[type=checkbox].setcheckbox{
        z-index: -100 !important;
        width: 1px !important;
        height: 1px !important;
        clip: rect(1px, 1px, 1px, 1px);
        position: absolute;
    }
    input[type=checkbox].setcheckbox:checked+.lbl::before, input[type=radio].setcheckbox:checked+.lbl::before {
        display: inline-block;
        content: '\f00c';
        color: #32a3ce;
        background-color: #F5F8FC;
        border-color: #adb8c0;
    }
    input[type=checkbox].setcheckbox+.lbl::before, input[type=radio].setcheckbox+.lbl::before {
        cursor: pointer;
        font-family: fontAwesome;
        font-weight: 400;
        font-size: 12px;
        color: #FFF;
        content: "\a0";
        background-color: #FAFAFA;
        border: 1px solid #c8c8c8;
        box-shadow: 0 1px 2px rgba(0,0,0,.05);
        border-radius: 0;
        display: inline-block;
        text-align: center;
        height: 16px;
        line-height: 14px;
        min-width: 16px;
        margin-right: 1px;
        position: relative;
        top: -1px;
    }
</style>
<script>
import Vue from 'vue';
import co from 'co';
import extend from 'extend';
import util from 'util';
export default /*Vue.components('child',{template: '<div>A custom component!</div>'})*/
Vue.extend({
    props:{
        dataSource:{
            type:String,
            required:true
        },
        name:{
            type:String,
            default:''
        },
        /*页面参数*/
        params:{
            type:Object,
            default:function(){
                return{};
            }
        }
    },
    data:function(){
        return{
            inputs:[],
            value:''
        }
    },
    created:function(){
        co(this._init);
        this._initWatch;
        setTimeout(()=>{
                this.onchange();
            },1000);
    },
    methods:{
        _initWatch:function* (){
            this.$watch('dataSource',function(){
                co(this._init);
            })
        },
        _getData:function* (){
            if(!this.dataSource){
                return Promise.resolve([]);
            }
            if(util.isString(this.dataSource)){
                var response = yield this.$http.get(this.dataSource,this.params);
                if(response.data.status === 0){
                    return Promise.resolve(response.data.data);
                }else{
                    return Promise.resolve([]);
                }
            }
            if(util.isArray(this.dataSource)){
                return Promise.resolve(this.dataSource);
            }
            return Promise.resolve([]);
        },
        _init:function* (){
            var data = yield co(this._getData);
            this.inputs = data;
          
        },
        onchange: function(){
            
            console.log(this.inputs)
        }
    }
})
</script>
